<template>
    <div class="seckillall">
        <div class="head">
            <el-form :model="queryParams" ref="queryForm" :inline="true">


                <!-- <el-form-item label="栏目状态" prop="fileStatus">

                    <el-select v-model="queryParams.fileStatus" placeholder="请选择课程状态" filterable>
                        <el-option label="启用" value="0"></el-option>
                        <el-option label="禁用" value="1"></el-option>
                    </el-select>
                </el-form-item> -->
                <el-form-item label="上传人姓名" prop="userName">
                    <el-input v-model="queryParams.userName" placeholder="请输入栏目状态" clearable style="width: 240px" />
                </el-form-item>




                <el-form-item>
                    <el-button type="primary" size="default" @click="searchBtn()">搜索</el-button>
                    <el-button size="default" @click="resetBtn">重置</el-button>
                </el-form-item>
            </el-form>

            <div class="middle">



            </div>
            <div class="end">
                <el-table :data="tableData" row-key="id" style="width: 100%;" @selection-change="handleSelectionChange">
                    <el-table-column type="selection" />
                    <el-table-column label="序号" prop="index">
                        <template #default="scope">{{ scope.$index + 1 }}</template>
                    </el-table-column>
                    <el-table-column property="fileName" label="文件名称" />

                    <el-table-column property="userName" label="上传人名称" />
                    <el-table-column label="身份">
                        <template #default="scope">
                            <!-- {{ scope.row.fileStatus }}   -->
                            <el-button type="success" v-if="scope.row.studentName != null" plain>学生</el-button>
                            <el-button type="primary" v-else plain>老师</el-button>
                        </template>
                    </el-table-column>

                    <el-table-column property="createdAt" label="创建时间" />
                    <el-table-column label="图片" width="180">
                        <template #default="scope">
                            <el-image v-if="isImage(scope.row.contentType)" :src="scope.row.url"
                                :preview-src-list="[scope.row.url]" style="width: 40px; height: 40px" preview-teleported
                                fit="cover">
                            </el-image>

                            <div v-else-if="isVideo(scope.row.contentType)" @click="openVideo(scope.row.url)"
                                style="width: 40px; height: 40px; cursor: pointer; position: relative;">
                                <video :src="scope.row.url" style="width: 100%; height: 100%; object-fit: cover;" muted
                                    preload="metadata">
                                </video>
                                <!-- 播放图标 -->
                                <i class="el-icon-video-play"
                                    style="position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); color: rgba(255,255,255,0.8);">
                                </i>
                            </div>


                        </template>
                    </el-table-column>
                    <el-table-column property="contentType" label="图片类型" />
                    <el-table-column label="状态">
                        <template #default="scope">
                            <!-- {{ scope.row.fileStatus }}   -->
                            <el-button type="success" v-if="scope.row.fileStatus == 0" plain>启用</el-button>
                            <el-button type="warning" v-else plain>禁用</el-button>
                        </template>
                    </el-table-column>

                    <el-table-column label="用户状态">
                        <template #default="scope">
                            <!-- {{ scope.row.fileStatus }}   -->
                            <el-button type="success" v-if="scope.row.studentStatus == 0" plain>启用</el-button>
                            <el-button type="warning" v-else-if="scope.row.studentStatus == 1" plain>禁用</el-button>
                            
                            <el-button type="success" v-if="scope.row.userStatus == 0" plain>启用</el-button>
                            <el-button type="warning" v-else-if="scope.row.userStatus == 1" plain>禁用</el-button>
                        </template>
                    </el-table-column>

                    <el-table-column label="是否被举报">
                        <template #default="scope">
                            <!-- {{ scope.row.fileStatus }}   -->
                            <el-button type="success" v-if="scope.row.isReport == 0" plain>正常</el-button>
                            <el-button type="danger" v-else plain>举报</el-button>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作">
                        <template #default="scope">
                            <el-button size="small" type="danger" @click="handleDisabled(scope.row)">
                                封禁
                            </el-button>
                            <br>
                            <el-button size="small" type="warning" @click="handleDelete(scope.row)">
                                禁用
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <div style="margin-left: 600px;">
                    <div class="demo-pagination-block">
                        <el-pagination v-model:current-page="queryParams.pageNum"
                            v-model:page-size="queryParams.pageSize" :page-sizes="[1, 2, 20, 50]"
                            layout="total, sizes, prev, pager, next, jumper" :total="total"
                            @size-change="handleSizeChange" @current-change="handleCurrentChange" />
                    </div>
                </div>

            </div>

        </div>

        <el-dialog v-model="disabledDialog" title="Tips" width="500">
            <span>确认要封禁该账号吗？</span>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="disabledDialog = false">取消</el-button>
                    <el-button type="primary" @click="disabledConfirm">
                        确定
                    </el-button>
                </div>
            </template>
        </el-dialog>

        <el-dialog v-model="deleteDialog" title="Tips" width="500">
            <span>确认要禁用该文件吗？</span>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="deleteDialog = false">取消</el-button>
                    <el-button type="primary" @click="deleteConfirm">
                        确定
                    </el-button>
                </div>
            </template>
        </el-dialog>

        <el-dialog v-model="videoDialogVisible" title="视频预览" width="60%" :close-on-click-modal="false"
            :close-on-press-escape="true" destroy-on-close class="video-dialog">
            <div class="video-container">
                <video v-if="currentVideo" :src="currentVideo" controls autoplay class="video-player" preload="auto">
                    您的浏览器不支持 video 标签。
                </video>
            </div>
        </el-dialog>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { Calendar, Search, Edit, Plus, Delete } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
// import { selectAllFile, selectAllTeacher, selectAllCategory, addCourse, getCourse, updateCourse, deleteCourse } from '@/api/upload'

import { selectAllFile, deleteFile, disabledStudent, disabledUser } from '@/api/upload'
//选择框
// const selectable = ref();
const single = ref(true)
const multiple = ref(true)
const total = ref(10);


const videoDialogVisible = ref(false)
const currentVideo = ref('')
//是否禁用表单
const selectRow = ref([]);
const deleteDialog = ref(false)
const disabledDialog = ref(false)
const deleteRow = ref([])
const disabledRow = ref([])
onMounted(async () => {

    await getFileList();

})
//查询参数
const queryParams = ref({
    id: '',
    fileName: '',
    fileStatus: '',
    pageNum: 1,
    pageSize: 2,
    categoryId: '',
    contentType: '',

})

//表格参数
const tableData = ref([])
//校验规则

// 删除
function handleDelete(row) {
    if (row == null) {
        row = selectRow.value.map(item => {
            return item.id
        })
    } else {
        console.log(row)
        row = [row.id]  
    }
    deleteRow.value = row
    deleteDialog.value = true;
}

function handleDisabled(row) {
    disabledRow.value = row
    disabledDialog.value = true;
}
//删除确定
function deleteConfirm() {

    deleteFile(deleteRow.value).then(res => {
        if (res.code === 500) {
            ElMessage.error(res.message);
        } else {
            ElMessage.success("禁用成功")

        }
        getFileList();
    })
    deleteDialog.value = false;

}
// 禁用
function disabledConfirm() {
    console.log(disabledRow.value, 12);
    if (disabledRow.value.userId != null) {
        console.log("userId: ", disabledRow.value.userId)
        disabledUser(disabledRow.value.userId).then(res => {
            if (res.code === 500) {
                ElMessage.error(res.message);
            } else {
                ElMessage.success("禁用成功")
            }
            getFileList();
        })

    } else {
        console.log("studentId: ", disabledRow.value.studentId)
        disabledUser(disabledRow.value.studentId).then(res => {
            if (res.code === 500) {
                ElMessage.error(res.message);
            } else {
                ElMessage.success("禁用成功")
            }
            getFileList();
        })
    }

    disabledDialog.value = false;
}


//每页条数变换
function handleSizeChange(val) {
    console.log("每页" + val + "条");
    queryParams.value.pageSize = val;
    queryParams.value.pageNum = 1;
    getFileList();


}
//每码变换
function handleCurrentChange(val) {
    console.log("第" + val + "页")
    queryParams.value.pageNum = val;
    getFileList();
}

// 选中某一列
function handleSelectionChange(selected) {
    console.log(selected, selected.length)
    single.value = selected.length != 1
    multiple.value = selected.length == 0
    selectRow.value = selected;
}

function searchBtn() {
    queryParams.value.pageNum = 1;
    getFileList()
}

function resetBtn() {
    queryParams.value = {
        id: '',
        fileName: '',
        pageNum: 1,
        fileStatus: '',
        pageSize: queryParams.value.pageSize,
    }
    getFileList()
}




async function getFileList() {
    try {
        const res = await selectAllFile(queryParams.value);
        total.value = res.data.fileInfoPage.total
        tableData.value = res.data.fileInfoPage.records
        for (const element of tableData.value) {
            if (element.studentName != null) {
                element.userName = element.studentName
            }
        }
    } catch (error) {
        console.log(error)
    }

}

function isImage(type) {
    return type.startsWith('image/');
}
function isVideo(type) {
    return type.startsWith('video/');
}

function openVideo(url) {
    currentVideo.value = url;
    videoDialogVisible.value = true;
}





</script>

<style scoped>
.seckillall {
    height: 100%;
    width: calc(100% - 50px);
    /* background-color: pink; */
    float: left;
}

.head {
    margin-top: 20px;
    margin-left: 20px;
    width: calc(100% - 50px);
}

.middle {
    width: 100%;
    height: 2vh;
    /* background-color: antiquewhite; */
    margin-bottom: 20px;
}

.add {
    margin-top: 15px;
    margin-left: 45px;
    width: 5%;
    height: 50%;
    float: left;
}

.end {
    float: left;
    width: calc(100% - 50px);
}

.video-dialog :deep(.el-dialog__body) {
    padding: 0;
}

.video-container {
    width: 100%;
    background: #000;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 400px;
}

.video-player {
    width: 100%;
    max-height: 70vh;
    object-fit: contain;
}
</style>